<template>
  <div>
    <!-- App.vue用了它，App.vue是父 -->
    <!-- <my-goods name="广西螺蛳粉" price="15" desc="表锅，我粗来了哦，次螺蛳粉"/> 
    <my-goods name="隆江猪脚饭" price="15" desc="胶原蛋白多"/> 
    <my-goods name="长沙臭豆腐" price="10" desc="臭臭臭" />  -->

    <!-- <my-goods :name="list[0].name" :price="list[0].price" :desc="list[0].desc"/>  -->
    <!-- 不加冒号除了代表写死以外，还代表传递的都是字符串 -->
    <!-- <my-goods :name="list[1].name" :price="list[1].price" :desc="list[1].desc"/> 
    <my-goods :name="list[2].name" :price="list[2].price" :desc="list[2].desc"/>  -->

    <!-- 
      $event在原生标签里，代表事件对象
      $event在组件里，代表子组件传递过来的默认值
     -->
    <my-goods
      v-for="item in list"
      :key="item.id"
      @cut="fn(item, $event)"
      :name="item.name"
      :price="item.price"
      :desc="item.desc"
    />

    <!-- <my-goods :name="age" :price="name" desc="写死"/>  -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      age: 16,
      name: '18a',
      list: [
        {
          id: 1,
          name: '广西螺蛳粉',
          price: 15,
          desc: '表锅，我粗来了哦，次螺蛳粉'
        },
        { id: 2, name: '隆江猪脚饭', price: 16, desc: '胶原蛋白多' },
        { id: 3, name: '长沙臭豆腐', price: 10, desc: '臭臭臭' }
      ]
    }
  },
  methods: {
    // 默认就有参数
    fn (item, num) {
      // console.log('收到通知', item, num)
      item.price -= num
    }
  }
}
</script>

<style></style>
